<template>
  <div id="app">
    <nav>
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
    </nav>
    <router-view/>
  </div>
</template>
<script>
import mapstate, { mapState } from 'vuex'; //从vuex中引入mapstate
export default {
  mounted(){
    //使用this.$store.state.xxx可以直接访问到仓库中的状态
    console.log(this.getName);
    // console.log(this.name);一

    console.log(this.$store.getters.getMessage);

    console.log(`旧值:${this.$store.state.number}`);
    this.$store.commit('setNumber')
    console.log(`新值:${this.$store.state.number}`);


    //异步
    console.log(`旧值：${this.$store.state.number}`);
    this.$store.dispatch('setNum');
    console.log(`新值:${this.$store.state.number}`);
  },

  computed:{
    //二 ...mapState(['name']), //经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
    getName(){
      return this.$store.state.name
    }
  }
}
</script>
<style>

</style>
